<!--
 * @Author: your name
 * @Date: 2021-11-22 10:59:08
 * @LastEditTime: 2021-11-22 10:59:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \shenshan_cim\src\views\swday\index.vue
-->
<template>
    <div class="swday">
        <div class="swdat" style="background-color: #4164E1;">
            <img src="../../../src/assets/images/swday/编组 20@2x.png" alt="">
            <div class="shuwu" :class="active===index?'area_change_active':''" @click="toolClick(item.name,index)" v-for="(item,index) in toolList" :key="item.name">
                <img :src="active === index ? item.activeSrc : item.src" alt="">

                <p>{{item.name}}</p>
            </div>
            <!-- <div class="shuyzt" :class="{ active: qchangebtn.qchnagebtndata == 2 }" @click="qhandlechangebtnClick(2)">
                <img src="../../../src/assets/images/swday/切图补充2备份@3x.png" alt="">
                <p>水务一张图</p>
            </div> -->
            <!-- <div class="shuwu" :class="{
                active:
                  qchangebtn.qchnagebtndata == '水务的一天' || !qchangebtn.qchnagebtndata,
              }" @click="qhandlechangebtnClick(1)">
                <img :src="{active: qchangebtn.qchnagebtndata == '水务的一天'}" alt="">
                <p>水务的一天</p>
            </div>
            <div class="shuyzt" :class="{ active: qchangebtn.qchnagebtndata == '水务一张图' }" @click="qhandlechangebtnClick(2)">
                <img :src="{active: qchangebtn.qchnagebtndata == '水务一张图'}" alt="">
                <p>水务一张图</p>
            </div> -->
        </div>
        <div class="swday-top">
            <div class="top">
                <img src="../../../src/assets/images/swday/编组 8@2x.png" alt="">
            </div>
            <div class="middle">

                <p>水资源概括</p>
                <div class="shuixy">
                    <!-- <div class="ziyauna" v-for="item in Lisks" :key="item.key" @click="listClick()">
                        <img :src="item.image" alt="">
                        <div class="shuyiji">
                            <span>{{item.number}}</span>
                            <span>{{item.tiaoshu}}</span>
                        </div>
                    </div> -->
                    <div class="ziyauna" :class="{
                active:
                  changebtn.chnagebtndata == 1 || !changebtn.chnagebtndata,
              }" @click="handlechangebtnClick(1)">
                        <img src="../../../src/assets/images/swday/编组 5@2x.png" alt="">
                        <div class="shuyiji">
                            <span>52</span>
                            <span>河流条数</span>
                        </div>
                    </div>
                    <div class="ziyauna" :class="{ active: changebtn.chnagebtndata == 2 }" @click="handlechangebtnClick(2)">
                        <img src="../../../src/assets/images/swday/编组 6@2x.png" alt="">
                        <div class="shuyiji">
                            <span>28</span>
                            <span>水库数量（个）</span>
                        </div>
                    </div>
                    <div class="ziyauna" :class="{ active: changebtn.chnagebtndata == 3 }" @click="handlechangebtnClick(3)">
                        <img src="../../../src/assets/images/swday/编组 15@2x.png" alt="">
                        <div class="shuyiji">
                            <span>1103.97</span>
                            <span>年平均降雨量（毫米）</span>
                        </div>
                    </div>
                    <div class="ziyauna" :class="{ active: changebtn.chnagebtndata == 4 }" @click="handlechangebtnClick(4)">
                        <img src="../../../src/assets/images/swday/编组 16@2x.png" alt="">
                        <div class="shuyiji">
                            <span>1100</span>
                            <span>日供水量（万立方米/天）</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fguthg">
                <div class="left">
                    <div class="left-top">
                        <div id="fguthgchart" style="width:1300px;height:350px; margin-left: 0px"></div>
                    </div>
                    <div class="left-bottom">
                        <div class="ziyaguna" v-for="item in Lisks" :key="item.key">
                            <img :src="item.image" alt="">
                            <div class="shuygiji">

                                <span>{{item.tiaoshu}}</span>
                                <span>{{item.number}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="right-top">
                        <div class="rightimage">
                            <img src="../../../src/assets/images/swday/编组 2备份@2x.png" alt="">
                        </div>
                        <div class="rightin">
                            <p>水库个位</p>
                            <div id="fgugcshart" style="width:200px;height:130px; margin-left: 0px"></div>
                        </div>
                    </div>

                    <div class="right-top">
                        <div class="rightimage">
                            <img src="../../../src/assets/images/swday/编组 5备份@2x.png" alt="">
                        </div>
                        <div class="rightin">
                            <p>河道个位</p>
                            <div id="hedaoshart" style="width:200px;height:130px; margin-left: 0px;"></div>
                        </div>
                    </div>

                    <div class="right-top">
                        <div class="rightimage">
                            <img src="../../../src/assets/images/swday/编组 6备份@2x.png" alt="">
                        </div>
                        <div class="rightin">
                            <p>积涝点个位</p>
                            <div id="jldcshart" style="width:200px;height:130px; margin-left: 0px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { Result } from 'element-ui'
import request from '../../utils/HTTP'
import * as echarts from 'echarts'
export default {
    data() {
        return {
            active: 0,
            //  active: "",
            changebtn: {
                chnagebtndata: 1,
            },
            qchangebtn: {
                qchnagebtndata: '水务的一天',
            },

            // src: require('../../../src/assets/images/swday/切图补充2@3x.png'),
            // activeSrc: require('../../../src/assets/images/swday/切图补充2备份 2@2x.png'),

            // src1: require('../../../src/assets/images/swday/切图补充2备份@3x.png'),
            // activeSrc1: require('../../../src/assets/images/swday/切图补充2备份 3@3x.png'),

            toolList: [
                {
                    name: '水务的一天',
                    src: require('../../../src/assets/images/swday/切图补充2@3x.png'),
                    activeSrc: require('../../../src/assets/images/swday/切图补充2备份 2@2x.png'),
                },
                {
                    name: '水务一张图',
                    src: require('../../../src/assets/images/swday/切图补充2备份@3x.png'),
                    activeSrc: require('../../../src/assets/images/swday/切图补充2备份 3@3x.png'),
                },
            ],
            Lisks: [
                {
                    image: require('../../../src/assets/images/swday/编组 9@2x.png'),

                    tiaoshu: '湿度',
                    number: '19%',
                },
                {
                    image: require('../../../src/assets/images/swday/编组 10@2x.png'),

                    tiaoshu: '空气指数',
                    number: 44,
                },
                {
                    image: require('../../../src/assets/images/swday/编组 13@2x.png'),

                    tiaoshu: 'pm2.5值）',
                    number: '9ug/m³',
                },
                {
                    image: require('../../../src/assets/images/swday/编组 14@2x.png'),

                    tiaoshu: 'pm10值',
                    number: '9ug/m³',
                },
            ],
            option: {
                title: {
                    text: '',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                legend: {
                    itemHeight: 10,
                    itemWidth: 10,
                    icon: 'none', // 修改形状
                    itemGap: 15, // 修改间距
                    top: 0,
                    left: 0,
                    borderColor: '#ccc', // 图例边框颜色
                    textStyle: {
                        //图例文字的样式
                        color: 'rgba(37,37,38,0.9)',
                        fontSize: 18,
                    },
                    data: ['水源单位供水量'],
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',

                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    // show:false,
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(37,37,38,0.9)',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(37,37,38,0.2)',
                            // color:rgba(255,255,255,.5)
                        },
                    },
                    axisTick: {
                        //x轴刻度线
                        show: false,
                    },
                    data: ['1/12', '1/13', '1/14', '1/15', '1/16', '1/17', '1/18', '1/13', '1/12', '1/13', '1/14'],
                },
                yAxis: {
                    type: 'value',
                    max: 5000,
                    min: 0,
                    splitNumber: 5,
                    name: '单位:万立方米/天',
                    nameTextStyle: {
                        color: '#000',
                        fontSize: 15,
                        nameLocation: 'start',
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(37,37,38,0.9)',
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(37,37,38,0.5)',
                            // color:rgba(255,255,255,.5)
                        },
                    },
                },
                series: [
                    {
                        name: '水源单位供水量',
                        smooth: true,
                        stack: '水源单位供水量',
                        type: 'line',
                        symbolSize: 15, //设置各个拐点的大小
                        symbol: 'circle',
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: '#3CBECD', //折线的颜色
                                width: '2', //折线粗细
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#fff', //拐点颜色
                                borderColor: '#3CBECD', //拐点边框颜色
                                borderWidth: 2, //拐点边框大小
                            },
                        },
                        emphasis: {
                            color: '#B7E7F0', //移入后的颜色
                        },
                        areaStyle: {
                            opacity: 1,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(60,190,205, 0.1)',
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(60,190,205, 0.5)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(60,190,205, 0)',
                                },
                            ]),
                        },
                        // symbol: 'none', //这句就是去掉点的
                        data: [3000, 3500, 3200, 2100, 4010, 1500, 2010, 3010, 3500, 3100, 4000],
                    },
                ],
            },
            options: {
                legend: {
                    top: '40',
                    orient: 'vertical',
                    left: 'left',
                    itemHeight: 7, //修改icon图形大小
                    itemWidth: 7, //修改icon图形大小
                    icon: 'circle',
                    formatter: function (name) {
                        var index = 0
                        var labels = ['正常', '超警戒']
                        var counts = [164, 5]
                        labels.forEach(function (value, i) {
                            if (value == name) {
                                index = i
                            }
                        })
                        return name + '' + counts[index] + '个'
                    },
                    textStyle: {
                        //图例文字的样式
                        color: '#000',
                        fontSize: 15,
                    },
                },
                tooltip: {
                    show: true,
                    formatter: function (params, value) {
                        return params.name + ':' + params.value + '个'
                    },
                    textStyle: {
                        fontSize: 17,
                    },
                },
                toolbox: {
                    show: false,
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [40, 30],
                        center: ['70%', '50%'],
                        // roseType: 'area',
                        itemStyle: {
                            borderRadius: 1,
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '15',
                                fontWeight: 'bold',
                            },
                        },
                        data: [
                            { value: 164, name: '正常' },
                            { value: 5, name: '超警戒' },
                        ],
                        label: {
                            //去除饼图的指示折线label
                            normal: {
                                show: false,
                                position: 'inside',
                                formatter: '{b}:{d}%',
                            },
                        },
                    },
                ],
            },
            optionst: {
                legend: {
                    top: '40',
                    orient: 'vertical',
                    left: 'left',
                    itemHeight: 7, //修改icon图形大小
                    itemWidth: 7, //修改icon图形大小
                    icon: 'circle',
                    textStyle: {
                        //图例文字的样式
                        color: '#000',
                        fontSize: 15,
                    },
                    data: ['正常', '超警戒'],
                    formatter: function (name) {
                        var index = 0
                        var labels = ['正常', '超警戒']
                        var counts = [164, 5]
                        labels.forEach(function (value, i) {
                            if (value == name) {
                                index = i
                            }
                        })
                        return name + '' + counts[index] + '个'
                    },
                },
                tooltip: {
                    show: true,
                    formatter: function (params, value) {
                        return params.name + ':' + params.value + '个'
                    },
                    textStyle: {
                        fontSize: 17,
                    },
                },
                toolbox: {
                    show: false,
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [40, 30],
                        center: ['70%', '50%'],
                        // roseType: 'area',
                        itemStyle: {
                            borderRadius: 1,
                        },
                        emphasis: {
                            scaleSize: 20,
                        },
                        data: [
                            { value: 164, name: '正常' },
                            { value: 5, name: '超警戒' },
                        ],
                        label: {
                            //去除饼图的指示折线label
                            normal: {
                                show: false,
                                position: 'inside',
                                formatter: '{b}:{d}%',
                            },
                        },
                    },
                ],
            },
            optionse: {
                legend: {
                    top: '40',
                    orient: 'vertical',
                    left: 'left',
                    itemHeight: 7, //修改icon图形大小
                    itemWidth: 7, //修改icon图形大小
                    icon: 'circle',
                    formatter: function (name) {
                        var index = 0
                        var labels = ['正常', '超警戒']
                        var counts = [164, 5]
                        labels.forEach(function (value, i) {
                            if (value == name) {
                                index = i
                            }
                        })
                        return name + '' + counts[index] + '个'
                    },
                    textStyle: {
                        //图例文字的样式
                        color: '#000',
                        fontSize: 15,
                    },
                },
                tooltip: {
                    show: true,
                    formatter: function (params, value) {
                        return params.name + ':' + params.value + '个'
                    },
                    textStyle: {
                        fontSize: 17,
                    },
                },
                toolbox: {
                    show: false,
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [40, 30],
                        center: ['70%', '50%'],
                        // roseType: 'area',

                        itemStyle: {
                            borderRadius: 1,
                        },
                        emphasis: {
                            scaleSize: 20,
                        },
                        data: [
                            { value: 164, name: '正常' },
                            { value: 5, name: '超警戒' },
                        ],
                        label: {
                            //去除饼图的指示折线label
                            normal: {
                                show: false,
                                position: 'inside',
                                formatter: '{b}:{d}%',
                            },
                        },
                    },
                ],
            },
        }
    },
    computed: {},
    watch: {},
    methods: {
        toolClick(name, index) {
            this.active = index
             if (index == 1) {
                //             this.IsActive = val.path;
                //   this.$router.push(val.path);
                this.$router.push('/home')
            }
            // if (this.active === val.name) {
            //     this.active = ''
            // } else {
            //     this.active = val.name
            //     switch (val.name) {
            //         case '水务的一天':
            //             console.log(val)

            //             break
            //         case '水务一张图':
            //             this.$router.push('/home')
            //             break
            //         default:
            //             break
            //     }
            // }
        },
        showchart() {
            let myChart = echarts.init(document.getElementById('fguthgchart'))
            myChart.setOption(this.option)
        },
        showsschart() {
            let myChart = echarts.init(document.getElementById('fgugcshart'))
            myChart.setOption(this.options)
        },
        hedachart() {
            let myChart = echarts.init(document.getElementById('hedaoshart'))
            myChart.setOption(this.optionst)
        },
        jldchart() {
            let myChart = echarts.init(document.getElementById('jldcshart'))
            myChart.setOption(this.optionse)
        },
        async handlechangebtnClick(val) {
            this.changebtn.chnagebtndata = val
        },
        async qhandlechangebtnClick(val) {
            this.qchangebtn.qchnagebtndata = val
            if (val == '水务一张图') {
                //             this.IsActive = val.path;
                //   this.$router.push(val.path);
                this.$router.push('/home')
            }
        },
    },
    created() {},
    mounted() {
        this.jldchart()
        this.hedachart()
        this.showsschart()
        this.showchart()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang="scss" scoped>
.swday {
    width: 100%;
    height: 100%;
    background: url('../../../src/assets/images/swday/编组 23.png') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    .swdat {
        width: 130px;
        height: 100%;

        // border: 1px solid red;
        background: url('../../../src/assets/images/swday/编组 2@2x.png') no-repeat center;
        background-size: 80% 50%;
        background-position: 10px 400px;
        img {
            width: 100px;
            height: 70px;
            margin: 20px 0 0 10px;
        }
    }
    .shuwu {
        width: 130px;
        height: 120px;
        // border: 1px solid red;
        margin: 20px 0 0 0px;
        // background-color: rgba(30,30,30,0.2);
        img {
            width: 50px;
            height: 50px;
            margin: 20px 0 0 40px;
        }
        p {
            margin-left: 20px;
            margin-top: 10px;
        }
    }
    .area_change_active {
        // width: 64px;
        // height: 28px;
        // line-height: 23px;
        background-color: rgba(30, 30, 30, 0.2);
        // background: linear-gradient(128deg, #013180 0%, #47618c 100%);
        border-left: 4px solid #09ffd3;
    }
    .shuyzt {
        width: 130px;
        height: 120px;
        // border: 1px solid red;
        margin: 20px 0 0 0px;

        img {
            width: 50px;
            height: 50px;
            margin: 20px 0 0 40px;
        }
        p {
            margin-left: 20px;
            margin-top: 10px;
        }
    }
    .swday-top {
        width: 92%;
        height: 100%;
        // border: 1px solid red;
        position: absolute;
        right: 0;
        .top {
            img {
                width: 600px;
                height: 40px;
                position: relative;
                top: 20px;
                left: 40px;
            }
        }
        .middle {
            width: 95%;
            height: 200px;
            background-color: #fff;
            box-shadow: 4px 4px 5px #999;
            border-radius: 10px;
            position: relative;
            top: 50px;
            left: 40px;
            p {
                font-size: 25px;
                color: #000;
                padding: 20px 0 20px 20px;
            }
            .shuixy {
                width: 90%;
                height: 80px;
                // border: 1px solid red;
                margin-left: 20px;
                margin-top: 20px;
                display: flex;
                justify-content: space-around;
                .ziyauna {
                    width: 300px;
                    height: 80px;
                    // border: 1px solid red;
                    border-radius: 10px;
                    background-color: #4164df;
                    display: flex;
                    img {
                        width: 50px;
                        height: 50px;
                        margin: 15px 0 20px 20px;
                    }
                    .shuyiji {
                        width: 200px;
                        height: 60px;
                        margin-top: 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        span {
                            display: block;
                            margin-left: 10px;
                        }
                        span:nth-child(1) {
                            font-size: 25px;
                        }
                        span:nth-child(2) {
                            font-size: 10px;
                        }
                    }
                }
                .ziyauna:nth-child(2) {
                    background-color: #70caf9;
                }
                .ziyauna:nth-child(3) {
                    background-color: #12e5e7;
                }
                .ziyauna:nth-child(4) {
                    background-color: #1fd2b8;
                }
                .active {
                    // width: 64px;
                    // background: linear-gradient(128deg, #013180 0%, #47618c 100%);
                    border: 2px solid rgba(145, 209, 234, 0.7);
                }
            }
        }
        .fguthg {
            // color: #000;
            width: 95%;
            height: 600px;
            // border: 1px solid red;
            position: relative;
            top: 80px;
            left: 40px;
            display: flex;
            flex-direction: row;
            .left {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                width: 80%;
                height: 600px;
                // border: 1px solid red;
                .left-top {
                    width: 95%;
                    height: 350px;
                    background-color: #fff;
                    box-shadow: 4px 4px 5px #999;
                    border-radius: 10px;
                    margin-left: 40px;
                }
                .left-bottom {
                    width: 95%;
                    height: 150px;
                    background-color: #fff;
                    box-shadow: 4px 4px 5px #999;
                    border-radius: 10px;
                    margin-left: 40px;
                    padding-top: 10px;
                    display: flex;
                    justify-content: space-around;
                    .ziyaguna {
                        width: 300px;
                        height: 130px;
                        border-right: 1px dotted #000;
                        //                 border-collapse:separate;
                        // border-spacing:  5px 0px ;
                        // border-radius: 10px;
                        // background-color: #4164df;
                        display: flex;
                        img {
                            width: 50px;
                            height: 50px;
                            margin: 35px 0 20px 30px;
                        }
                        .shuygiji {
                            width: 200px;
                            height: 60px;
                            margin-top: 30px;
                            color: #000;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            span {
                                display: block;
                                margin-left: 20px;
                            }
                            span:nth-child(1) {
                                font-size: 20px;
                                opacity: 0.7;
                            }
                            span:nth-child(2) {
                                font-size: 25px;
                                font-weight: bold;
                            }
                        }
                    }
                    // .ziyauna:nth-child(2) {
                    //     background-color: #70caf9;
                    // }
                    // .ziyauna:nth-child(3) {
                    //     background-color: #12e5e7;
                    // }
                    // .ziyauna:nth-child(4) {
                    //     background-color: #1fd2b8;
                    // }
                }
            }
            .right {
                width: 400px;
                height: 550px;
                background-color: #fff;
                box-shadow: 4px 4px 5px #999;
                border-radius: 10px;
                margin: 20px 0px 20px 20px;
                .right-top {
                    width: 100%;
                    height: 180px;
                    // border: 1px solid red;
                    display: flex;
                    justify-content: space-around;
                    .rightimage {
                        img {
                            width: 120px;
                            height: 120px;
                            margin: 40px 0 0 0px;
                        }
                    }
                    .rightin {
                        width: 200px;
                        height: 200px;
                        // border: 1px solid rgb(192, 170, 170);
                        p {
                            color: #000;
                            font-size: 28px;
                            font-weight: bold;
                            margin-top: 30px;
                        }
                    }
                }
            }
        }
    }
}
</style>
